<template>
  <div>
    <div class="top">
      <span class="title">分流模式</span>
      <el-radio-group v-model="radio">
        <el-radio :label="3">共享UPF分流</el-radio>
        <el-radio :label="6">专供UPF分流</el-radio>
      </el-radio-group>
    </div>
    <div v-if="radio===3" class="one address">
      <div class="customer">
        <span class="title">共享UPF节点</span>
        <el-button type="primary" size="mini" @click="addShareUpf">添加一行</el-button>

      </div>
      <el-table
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        :data="shareUpfData"
        border
        stripe
      >
        <el-table-column type="index" label="序号" width="120" />
        <el-table-column prop="SHARE_NODE" label="节点" width="360">
          <template slot-scope="scope">
            <el-select v-model="scope.row.value" size="mini" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="SHARE_NUM" label="用户私网地址池数量" width="360">
          <template slot-scope="scope">
            <el-input v-model="scope.row.SHARE_NUM" size="mini" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <div>
              <el-button size="mini" type="danger" @click="delShareUpf(scope.$index)">删除</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div v-if="radio===6" class="two address">
      <div class="customer">
        <span class="title">专供UPF节点</span>
        <el-button type="primary" size="mini" @click="addExcUpf">添加一行</el-button>
      </div>
      <el-table
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        :data="excUpfData"
        border
        stripe
      >
        <el-table-column type="index" label="序号" width="120" />
        <el-table-column prop="SHARE_NODE" label="用户私网地址池数量" width="360">
          <template slot-scope="scope">
            <el-input v-model="scope.row.SHARE_NODE" size="mini" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="SHARE_NUM" label="用户私网地址池数量" width="360">
          <template slot-scope="scope">
            <el-input v-model="scope.row.SHARE_NUM" size="mini" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <div>
              <el-button size="mini" type="danger" @click="delExcUpf(scope.$index)">删除</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="submit">
      <button @click="add">按钮</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 3,
      shareUpfData: [
        { SHARE_NODE: '', SHARE_NUM: '' },
        { SHARE_NODE: '', SHARE_NUM: '' },
        { SHARE_NODE: '', SHARE_NUM: '' }
      ],
      excUpfData: [
        { SHARE_NODE: '', SHARE_NUM: '' },
        { SHARE_NODE: '', SHARE_NUM: '' }
      ],
      options: [{
        value: 'BJ_BJ_BJ_UPF855_BC_HW',
        label: '数北'
      }, {
        value: 'BJ_BJ_BJ_UPF856_BC_HW',
        label: '中关村'
      }],
      value: ''
    }
  },
  methods: {
    addShareUpf() {
      this.shareUpfData.push({ SHARE_NODE: '', SHARE_NUM: '' })
    },
    async delShareUpf(index) {
      try {
        await this.$confirm('确定要删除吗？')
        this.shareUpfData.splice(index, 1)
      } catch (error) {
        console.log(error)
      }
    },
    addExcUpf() {
      console.log(456)
      this.excUpfData.push({ SHARE_NODE: '', SHARE_NUM: '' })
    },
    async delExcUpf(index) {
      try {
        await this.$confirm('确定要删除吗？')
        this.excUpfData.splice(index, 1)
      } catch (error) {
        console.log(error)
      }
    },
    add() {
      console.log(123)
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-right: 20px
}
.address {
  margin-bottom: 20px;
}
.top {
  margin-bottom: 20px;
}
.customer {
  margin-bottom: 10px;
}
</style>
